<template>
  <div ref="swiperDiv">
    <swiper class="engine-template-wrapper" :options="swiperOptions" id="engineTemplateWrapper" ref="engineTemplateWrapper" v-if="scenesList.length > 0">
      <swiper-slide class="relative getCommonStyles" v-for="(scene, i) in scenesListCall" :key="i" :style="getCommonStyle({ ...scene.commonStyle, top: pageTop }, scalingRatio)">
        <!--页面内容区域-->
        <div :style="getCommonStyle({ ...scene.commonStyle, top: pageTop, height: pageData.height, position: 'relative' }, scalingRatio)" class="getCommonStyles">
          <componentsTemplate
            class="getCommonElementStyles"
            v-for="(item, index) in scene.elements"
            :key="index"
            @handleElementClick="handleElementClick"
            :element="item"
            :playing="scene.playing"
            :style="getCommonStyle(item.commonStyle, scalingRatio)"
          ></componentsTemplate>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { getCommonStyle } from '@/utils';
import componentsTemplate from 'preview/components/components-template';
import elementMixin from '@/mixins/element-mixin';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'sxc-engine-page',
  components: {
    componentsTemplate,
    'audio-player': () => import('@/components/audio-player')
  },
  data() {
    return {
      getCommonStyle,
      scalingRatio: 1,
      pageTop: 0,
      playing: true,
      swiperOptions: {
        loop: false,
        navigation: {
          nextEl: '#btn-next',
          prevEl: '#btn-prev'
        }
      },
      loopScenesTimer: '',
      timeEnd: 0,
      loopScenesFlag: 0,
      loopScenesCount: 0,
      scenesList: []
    };
  },
  computed: {
    ...mapState('programs', ['pageData', 'scenes', 'currSceneUUID']),
    scenesListCall() {
      this.scenesList.map(item => {
        item.playing = false;
        if (item.uuid === this.currSceneUUID) {
          item.playing = true;
        }
        return { ...item };
      });
      return this.scenesList;
    }
  },
  mixins: [elementMixin],
  created() {},
  watch: {
    currSceneUUID() {
      this.scenesList.map(item => {
        item.playing = false;
        if (item.uuid === this.currSceneUUID) {
          item.playing = true;
        }
        return { ...item };
      });
    }
  },
  mounted() {
    this.scenesList = this.scenes;
    this.scenesList.map(item => {
      item.playing = false;
      if (item.uuid === this.currSceneUUID) {
        item.playing = true;
      }
      return { ...item };
    });
    this.$nextTick(() => {
      this.scalingRatio = document.getElementById('engineTemplateWrapper').clientWidth / this.pageData.width;
      this.pageTop = (document.documentElement.clientHeight - this.pageData.height * this.scalingRatio) / 2;
      this.pageTop = Math.max(this.pageTop, 0);
      let that = this;
      for (let i = 0; i < document.getElementsByClassName('getCommonStyles').length; i++) {
        document.getElementsByClassName('getCommonStyles')[i].style.setProperty('width', that.pageData.width * that.scalingRatio + 'px', 'important');
        document.getElementsByClassName('getCommonStyles')[i].style.setProperty('height', that.pageData.height * that.scalingRatio + 'px', 'important');
        document.getElementsByClassName('getCommonStyles')[i].style.setProperty('top', '0px', 'important');
      }
      for (let i = 0; i < document.getElementsByClassName('getCommonElementStyles').length; i++) {
        document
          .getElementsByClassName('getCommonElementStyles')
          [i].style.setProperty('width', parseInt(document.getElementsByClassName('getCommonElementStyles')[i].style.width) * that.scalingRatio + 'px', 'important');
        document
          .getElementsByClassName('getCommonElementStyles')
          [i].style.setProperty('height', parseInt(document.getElementsByClassName('getCommonElementStyles')[i].style.height) * that.scalingRatio + 'px', 'important');
        document
          .getElementsByClassName('getCommonElementStyles')
          [i].style.setProperty('top', parseInt(document.getElementsByClassName('getCommonElementStyles')[i].style.top) * that.scalingRatio + 'px', 'important');
        document
          .getElementsByClassName('getCommonElementStyles')
          [i].style.setProperty('left', parseInt(document.getElementsByClassName('getCommonElementStyles')[i].style.left) * that.scalingRatio + 'px', 'important');
      }
    });
    this.loopScenesCount = this.scenes.length - 1;
    this.loopScenesStart();
  },
  beforeDestroy() {
    clearTimeout(this.loopScenesTimer);
  },
  methods: {
    ...mapMutations('programs', ['prevScene', 'nextScene','setupScene']),
    loopScenesStart() {
      let that = this;
      let timer = that.scenes[that.loopScenesFlag].duration * 1000;
      that.loopScenesTimer = setTimeout(function() {
        document.getElementById('btn-next').click();
        if (that.loopScenesFlag < that.loopScenesCount) {
          that.loopScenesFlag++;
        } else {
          that.loopScenesFlag = 0;
          that.$refs.engineTemplateWrapper.swiper.slideTo(0, 0, false);
          that.setupScene(0);
        }
        return that.loopScenesStart();
      }, timer);
    },
    /**
     * 按钮点击事件
     * @param eventsData
     */
    async handleElementClick(eventsData, element) {
      for (let i = 0, len = eventsData.length; i < len; i++) {
        if (this['_event_' + eventsData[i].type]) {
          await this['_event_' + eventsData[i].type](eventsData[i], element, this.pageData);
        }
      }
    }
  }
};
</script>

<style scoped>
.engine-template-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.relative {
  position: relative;
}
.hidden {
  overflow: hidden;
}
</style>
